<template>
  <div class="info-form">
    <Form ref="formValidate" :model="formValidate"  :rules="ruleValidate">
      <FormItem prop="phone"  class="info-form-item">
        <span class="info-form-item-label">
          +86
          <Icon type="ios-arrow-down" />
        </span>
       <i-input v-model="formValidate.phone" clearable size="large"  class="info-form-item-input"  :placeholder="$t('请输入手机号')"></i-input>
      </FormItem>
      <FormItem  prop="checkNum" class="info-form-item">
          <i-input v-model="formValidate.checkNum" size="large"  class="info-form-item-input"  :placeholder="$t('请输入手机验证码')">
            <Button slot="append" @click="getcheckNum">{{$t('获取验证码')}}</Button>
          </i-input>
      </FormItem>
      <Button class="info-form-btn" type="error" size="large" long @click="handleSubmit('formValidate')">{{$t('验证码')}}</Button>
    </Form>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapMutations } from 'vuex';
export default {
  name: 'CheckPhone',
  data () {
    return {
      formValidate: {
        phone: '',
        checkNum: ''
      },
      ruleValidate: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { type: 'string', pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '手机号格式出错', trigger: 'blur' }
        ],
        checkNum: [
          { required: true, message: '必须填写验证码', trigger: 'blur' },
          { type: 'string', min: 4, max: 4, message: '验证码长度错误', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    ...mapMutations(['SET_SIGN_UP_SETP']),
    getcheckNum () {
      if (this.formValidate.phone.length === 11) {
        this.$http.getSmsCode({type:1,phone:this.formValidate.phone}).then(res=>{
          const {status,mess} = res
          if(status===200){
            this.$Message.success({
              content:mess,
              duration: 4,
              closable: true
           });
          }
        })
      } else {
        this.$Message.error({
          content: this.$t('请正确输入手机号'),
          duration: 4,
          closable: true
        });
      }
    },
    handleSubmit (name) { // 提交验证
      this.$refs[name].validate((valid) => {
        if (valid) {
         const {phone, phonecode} = this.formValidate
          this.$router.push({ path: '/SignUp/inputInfo', query: { phone, phonecode } });
          this.SET_SIGN_UP_SETP(1);
        } else {
          this.$Message.error({
            content: this.$t('请正确输入手机号和密码'),
            duration: 6,
            closable: true
          });
        }
      });
    }
  },
  store
};
</script>

<style lang="scss" scoped>
.info-form {
  width: 90% !important;
  &-item{
    margin:30px 0;
    display:flex;
    align-items:center;
    border:1px solid #eee;
    &-label{
      width:80px;
      border-right: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &-input{
     height:50px;
    }
    &-btn{

    }
  }
}
/deep/ .ivu-form-item-content{
  display: flex;
  width: 100%;
}
/deep/ .ivu-input-group-large .ivu-input{
  height: 50px;
}
/deep/ .ivu-input-large{
  height: 50px;
  border: none;
}
</style>
